{include file="public/header" /}
<style>
    .layui-layer{
        border-radius: 20px;
    }
</style>
<body class="hide-top bgc">
<div class="detail-hd flex-center" style="display: none">
    <i class="layui-icon layui-icon-left"></i>
    <ul>
        <li class="active pro" data-id="pro">
            <div>商品</div>
            <p></p>
        </li>
        <li class="det" data-id="spec">
            <div>详情</div>
            <p></p>
        </li>
    </ul>
</div>
<div class="detail-swiepr" id="pro">
    <div class="swiper">
        <div class="swiper-container carousel">
            <div class="swiper-wrapper">
                {foreach name="$info.images" item="vo"}
                <div class="swiper-slide" data-id="1">
                    <img src="{$vo}" alt=""/>
                </div>
                {/foreach}
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <i class="layui-icon layui-icon-left"></i>
</div>

<div class="detail-news">
    <div class="price">
        <p>￥<span>{$info.vip_price}</span></p>
        <p class="old">￥{$info.price}</p>
    </div>
    <p>{$info.title}</p>
    <p class="flex-layout">销量{$info.sales} <span>库存{$info.stock}</span></p>
</div>

<ul class="detail-spec-form">
    {if $info.specData}
    <li class="det-spec">
        <p>规格</p>
        <span id="selectSpec">请选择</span>
    </li>
    {/if}
    <li>
        <p>运费</p>
        <span>￥{$info.freight}</span>
    </li>
</ul>

<div class="detail-title flex-center" id="spec">
    <span></span>商品详情 <span></span>
</div>
<div class="detail-txt">{:htmlspecialchars_decode($info['content'])}</div>

<div class="detail-footer flex-layout">
    <div onclick="load_href('{:url(\'cart/index\')}',2)">
        <img src="/static/index/img/icon51.png" alt="">
        <p>购物车</p>
        {if $count > 0}<span>{$count}</span>{/if}
    </div>
    <ul>
        <li>
            <img src="/static/index/img/icon52.png" alt="">
            <p>加入购物车</p>
        </li>
        <li>
            <img src="/static/index/img/icon53.png" alt="">
            <p>立即购买</p>
        </li>
    </ul>
</div>


<div class="detail-mdl" style="display: none">
    <div class="detail-mdl-pro">
        <p class="flex-center">
            <img src="{$info.icon}" alt="" class="icon">
        </p>
        <div class="rgt">
            <p class="price">￥<span class="vip_price">{$info.vip_price}</span></p>
            <p>库存 <span class="stock">{$info.stock}</span></p>
            <img src="/static/index/img/icon54.png" class="cancel" alt="">
        </div>
    </div>
    {if $info.specData}
    <ul class="detail-mdl-spec" data-count="{:count($info.specData)}">
        {foreach name="$info.specData" key="key" item="spec"}
        <li>
            <p>{$spec.title}</p>
            <ul data-index="{$key}">
                {foreach name="$spec.child" item="child"}
                <li data-id="{$child.id}" class="spec-item">{$child.title}</li>
                {/foreach}
            </ul>
        </li>
        {/foreach}
    </ul>
    {/if}
    <div class="model-mdl-stepper flex-layout">数量
        <div>
            <p class="minus">-</p>
            <input type="number" value="1" id="num" readonly>
            <p class="add">+</p>
        </div>
    </div>
    <ul class="model-mdl-btn">
        <li data-type="1" class="buy">
            <img src="/static/index/img/icon52.png" alt="">
            <p>加入购物车</p>
        </li>
        <li data-type="2" class="buy">
            <img src="/static/index/img/icon53.png" alt="">
            <p>立即购买</p>
        </li>
    </ul>
</div>
</body>
{include file="public/footer"/}
<script src="/static/index/js/swiper-bundle.js"></script>
<script>
    $(function () {
        const ly = layui.layer, a = $, b = a(".buy"), m = a('.minus'), d = a('.add'),
            api = {
                addCart: '{:url("cart/add")}',
                buy: '{:url("product/submit")}',
                getSpecPrice: '{:url("product/getSpecPrice")}',
            },
            si = a('.spec-item'), sil = a('.detail-mdl-spec').attr('data-count'), siArr = [];
        if (sil) {
            //初始化规格组合
            for (var i = 0; i < parseInt(sil); i++) {
                siArr.push('');
            }
        }
        si.click(function () {
            siArr[parseInt(a(this).parent().attr('data-index'))] = a(this).text();
            a(this).addClass('active').siblings().removeClass('active');
            getSpecPrice();
        })

        function getSpecPrice() {
            if (verifySpec()) {
                a.get(api.getSpecPrice, {pid: '{$info.id}', spec: siArr.join(',')}, function (d) {
                    a("#selectSpec").text(siArr.join('-'));
                    if (d.code === 1) {
                        a('.icon').attr('src', d.data.icon ? d.data.icon : '{$info.icon}');
                        a('.vip_price').text(d.data.vip_price);
                        a('.stock').text(d.data.stock);
                    } else {
                        ly.msg(d.msg)
                    }
                })
            }
        }
        function verifySpec(){
            let open = true;
            siArr.forEach(function (v, i) {
                if (!v) open = false;
            })
            return open;
        }

        m.click(function () {
            const t = a(this), n = t.next(), v = parseInt(n.val());
            v > 1 ? n.val(v > 1 ? v - 1 : 1) : '';
        });
        d.click(function () {
            var t = a(this), n = t.prev(), v = parseInt(n.val());
            n.val(v + 1);
        });

        b.click(function () {
            var t = a(this).attr('data-type'), u = t === '1' ? api.addCart : api.buy, n = a("#num").val();
            if (sil && !verifySpec()) {
                ly.msg('请选择规格');
                return
            }
            return parseInt(n) > 0 ? common.request(u, {
                pid: '{$info.id}',
                num: n,
                type: 1,
                spec: siArr.length > 0 ? siArr.join(',') : ''
            }) : ly.msg('数量错误');
        })

        a('.detail-footer li').click(function () {
            openSpec();
        });
        a('.det-spec').click(function () {
            openSpec();
        })
        a('.cancel').click(function () {
            ly.closeAll()
        })

        function openSpec() {
            ly.open({
                type: 1,
                offset: 'b',
                anim: 'slideUp',
                area: ['100%', a('.detail-mdl').height() + 'px'],
                shade: 0.4,
                closeBtn:0,
                shadeClose: true,
                title:false,
                id: 'ID-demo-layer-direction-b',
                content: a('.detail-mdl')
            });
        }

        new Swiper('.carousel', {
            pagination: {
                el: '.swiper-pagination',
            },
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            loop: true
        });
    })

</script>
</html>